<template>
  <div class="">
    <div class="record_box" v-for="item in batch">
      <div class="bases-equip">
        <div class="greenhouses">
          <div class="greenhouses-one">
            <div>{{item.base_name}}-{{item.house_name}}<span>【{{item.pro_name}}】</span></div>
          </div>
          <div class="greenhouses-pz greenhouses-c" v-if="config==0&&item.config==0">
            <div @click="getEquipConfig(item)">配置</div>
          </div>
          <div class="greenhouses-pz greenhouses-d" v-if="config==1||item.config==1">
            <div @click="getEquipConfig(item)">查看配置</div>
          </div>
        </div>
        <div class="eq-downs">
          <div class="equipments" v-for="items in item.equip_info">
            <div class="equip-conf">
              <div class="equip-one">
                <div class="equip-one-o">{{items.name}}</div>
                <div class="equip-one-t wd" v-if="items.type==1">
                  <div>温度</div>
                </div>
                <div class="equip-one-t sd" v-else>
                  <div>湿度</div>
                </div>
              </div>
              <div class="equip-two">
                <div class="equip-two-o">
                  <div class="equip-two-o-o">{{items.sources}}</div>
                  <div class="equip-two-o-t" v-if="items.type==1">℃</div>
                  <div class="equip-two-o-t" v-else>%</div>
                </div>
                <div class="equip-two-t" v-if="items.type==1">当前温度</div>
                <div class="equip-two-t" v-else>当前湿度</div>
                <div class="equip-two-f equip-c" v-if="config==0&&items.config==0">
                  <div class="equip-img"><img src="@/assets/images/jiantou.png"/></div>
                  <div class="equip-fw">该设备未配置范围</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-popup v-model="showPicker" round  :style="{ width: '80%',height:'4.5rem' }">
      <div class="select_box">
        <div class="configs">
          <h2>限制配置</h2>
        </div>
        <div>
          <div class="limit-temp">
            <div class="temp-limit">温度限制</div>
            <div class="temp-limit-o">
              <input  v-model="min_temp" type="number" />
            </div>
            <div class="temp-center">
              <div class="temp-limit-t"></div>
            </div>
            <div class="temp-limit-f">
              <input  v-model="max_temp" type="number" />
            </div>
          </div>
          <div class="limit-hum">
            <div class="hum-limit">湿度限制</div>
            <div class="hum-limit-o">
              <input  v-model="min_hum" type="number" />
            </div>
            <div class="hum-center">
              <div class="hum-limit-t"></div>
            </div>
            <div class="hum-limit-f">
              <input  v-model="max_hum" type="number" />
            </div>
          </div>
        </div>
      </div>
      <div class="save">
        <div class="save-equip" @click="onConfirm">确认保存</div>
        <div class="save-equip" @click="onCancel">取消操作</div>
      </div>
    </van-popup>
  </div>
</template>

<script>
  import { Toast } from 'vant';
    export default {
        name: "equipView",
      props: {
        batch: {
          type: Array,
          default() {
            return []
          }
        },
      },
      data(){
        return {
          showPicker: false,
          min_temp:'',
          max_temp:'',
          min_hum:'',
          max_hum:'',
          hid:0,
          config:0
        }
      },
      created() {

      },
      methods: {
        goBack(){
          this.$router.go(-1);
        },
        getEquipConfig(val) {
          let that = this;
          that.$http.get('/api/monitorApi/config_info', {hid:val.hid}, r => {
            if (r.data!=null)
            {
              that.min_temp = r.data.temy_min;
              that.max_temp = r.data.temy_max;
              that.min_hum = r.data.hum_min;
              that.max_hum = r.data.hum_max;
            }else{
              that.min_temp = '';
              that.max_temp = '';
              that.min_hum = '';
              that.max_hum = '';
            }
            that.hid = val.hid;
            that.showPicker = true;
          })
        },
        onConfirm(val) {
          let that = this;
          if (that.min_temp==''||that.max_temp==''||that.min_hum==''||that.max_hum==''){
            Toast.fail('温湿度不能为空');return false;
          }
          that.$http.get('/api/monitorApi/save_config',{temy_min:that.min_temp,temy_max:that.max_temp,hum_min:that.min_hum,hum_max:that.max_hum,hid:that.hid}, r => {
            Toast.success(r.info);
            that.showPicker = false;
            that.config = 1;
          })
        },
        onCancel(){
          this.showPicker = false;
        }
      }
    }
</script>

<style scoped>

  .record_box{
    margin: 10px;
    background: #ffffff;
    border-radius: 8px;
  }
  .record_box .title {
    padding: 10px;
  }
  .record_box .title h2{
    padding-left: 5px;
    font-size: .32rem;
    /*color: var(--color-tint);*/
    border-left: 3px solid var(--color-tint);
    font-weight: normal;
  }
  .record_item{
    padding: 10px;
    font-size: .28rem;
    border-top: 1px solid #eee;
  }
</style>
